// 迭代
function fibosingle(n) {
    if (n == 1) {
        return 0;
    } else if (n == 2 || n == 3) {
        return 1;
    } else {
        let n1 = 0;
        let n2 = 1;
        let sum;
        for (let i = 2; i < n; i++) {
            sum = n1 + n2;
            n1 = n2;
            n2 = sum;
        }
        return sum;
    }
}

function fibo(n) {
    let data = [];
    for (let i = 1; i <= n; i++) {
        data.push(fibosingle(i));
    }
    return data;
}

function time1fibo() {
    let dataTime = [];
    for (let i = 1; i <= 35; i++) {
        let startTime = new Date().getTime();
        // console.log(startTime);
        fibosingle(i);
        let endTime = new Date().getTime();
        // console.log("结束时间" + endTime);
        let duringTime;
        duringTime = endTime - startTime;
        dataTime.push(duringTime);
    }
    return dataTime;
}


// 递归
function digui(n) {
    if (n == 1) {
        return 0;
    } else if (n == 2 || n == 3) {
        return 1
    } else {
        return digui(n - 2) + digui(n - 1);
    }
}

function diguitime() {
    let dataTime = [];
    for (let i = 1; i <= 35; i++) {
        let startTime = new Date().getTime();
        // console.log(startTime);
        digui(i);
        let endTime = new Date().getTime();
        // console.log("结束时间" + endTime)
        let duringTime;
        duringTime = endTime - startTime;
        dataTime.push(duringTime);
    }
    return dataTime;
}


// 公式
function gongshi(n) {
    n = n - 1;
    return Math.pow(((1 + Math.sqrt(5)) / 2), n) / Math.sqrt(5) - Math.pow(((1 - Math.sqrt(5)) / 2), n) / Math.sqrt(5)
}

function gongshitime() {
    let dataTime = [];
    for (let i = 1; i <= 35; i++) {
        let startTime = new Date().getTime();
        // console.log(startTime);
        // Math.round()四舍五入方法
        // console.log(Math.round(gongshi(i)));
        gongshi(i);
        let endTime = new Date().getTime();
        // console.log("结束时间" + endTime)
        let duringTime;
        duringTime = endTime - startTime;
        dataTime.push(duringTime);
    }
    // console.log(dataTime);
    return dataTime;
}


// 矩阵
function juzhen(n) {
    if (n === 1) {
        return 0;
    } else if (n === 2 || n === 3) {
        return 1;
    } else {
        let ju = [
            [1, 1],
            [1, 0]
        ]
        let zhen = [
            [1, 1],
            [1, 0]
        ]
        for (let i = 1; i < n - 2; i++) {
            zhen = [
                [zhen[0][0] * ju[0][0] + zhen[0][1] * ju[1][0], zhen[0][0] * ju[0][1] + zhen[0][1] * ju[1][1]],
                [zhen[1][0] * ju[0][0] + zhen[1][1] * ju[1][0], zhen[1][0] * ju[0][1] + zhen[1][1] + ju[1][1]]
            ]
        }
        return zhen[0][0];
    }
}

function juzhentime() {
    let dataTime = [];
    for (let i = 1; i <= 35; i++) {
        let startTime = new Date().getTime();
        // console.log(startTime);
        // console.log(juzhen(i));
        let endTime = new Date().getTime();
        // console.log("结束时间" + endTime)
        let duringTime;
        duringTime = endTime - startTime;
        dataTime.push(duringTime);
    }
    // console.log(dataTime);
    return dataTime;
}

// 第一张图 增长曲线
(function() {
    let myChart = echarts.init(document.querySelector("#first-echarts"))
        // let label = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
    let value = fibo(15);
    let label = function() {
            let data = [];
            for (let i = 1; i <= value.length; i++) {
                data.push(i);
            }
            return data;
        }
        // console.log(value.length)

    let option = {
        title: {
            text: '增长曲线',
            textStyle: {
                color: "#fff",
            },
            left: "center"
        },
        grid: {
            top: 30,
            left: 36,
            right: 16,
            bottom: 32,
            containLabel: false,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    type: "solid",
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: 'rgba(255,255,255,0)', // 0% 处的颜色
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(255,255,255,1)', // 100% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(255,255,255,0)', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            },
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                formatter: '{value}',
                fontSize: 14,
                margin: 20,
                textStyle: {
                    color: '#7ec7ff',
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#243753',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#243753',
                },
            },
            axisTick: {
                show: false,
            },
            data: label()
        }, ],
        yAxis: [{
            boundaryGap: false,
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#7ec7ff',
                },
            },
            nameTextStyle: {
                color: '#fff',
                fontSize: 12,
                lineHeight: 40,
            },
            splitLine: {
                lineStyle: {
                    color: '#243753',
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#283352',
                },
            },
            axisTick: {
                show: false,
            },
        }, ],
        series: [{
            type: 'line',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
                color: '#19a3df',
                borderColor: '#a3c8d8',
            },
            lineStyle: {
                normal: {
                    width: 6,
                    color: '#19a3df',
                },
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, [{
                                offset: 0,
                                color: 'rgba(88,255,255,0.2)',
                            },
                            {
                                offset: 0.8,
                                color: 'rgba(88,255,255,0)',
                            },
                        ],
                        false
                    ),
                },
            },
            data: value,
        }, ],
    };
    // 配置项和数据给我们的实例化对象
    myChart.setOption(option);

    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法

        myChart.resize();
    });

})();
// 第三个图
(function() {
    let key = function() {
        let index = [];
        for (let i = 0; i < 35; i++) {
            index.push(i + 1);
        }
        return index;
    }
    let myChart = echarts.init(document.querySelector("#third-echarts"))
    let option = {
        title: {
            text: '运行时间对比图',
            textStyle: {
                color: "#fff",
            },
            left: "2%"
        },
        tooltip: {
            // type: "shadow",

            trigger: 'axis',
            borderWidth: 2,
            borderColor: "#000",
            extraCssText: 'valueDesc',
            // formatter: '{b}<br/>{a0}：{c0}<br/>{a1}'
            axisPointer: {
                lineStyle: {
                    type: "solid",
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: 'rgba(255,255,255,0)', // 0% 处的颜色
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(255,255,255,1)', // 100% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(255,255,255,0)', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            },

        },
        legend: {
            right: "4%",
            top: "2%",
            textStyle: {
                color: "#fff",
                fontSize: 12
            }
        },
        grid: {
            top: "15%",
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            // feature: {
            //     saveAsImage: {}
            // }
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: key(),
            axisLine: {
                lineStyle: {
                    color: "rgb(27,175,209)"
                }

            },
            axisTick: {
                show: false,
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: "#FFF"
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,0.1)"
                }
            }
        },
        series: [{
                name: '迭代',
                type: 'line',
                // stack: 'Total',
                smooth: true,
                data: time1fibo(),
            },
            {
                name: '递归',
                type: 'line',
                // stack: 'Total',
                smooth: true,
                data: diguitime(),

            },
            {
                name: '公式',
                type: 'line',
                // stack: 'Total',
                smooth: true,
                data: gongshitime()
            },
            {
                name: '矩阵',
                type: 'line',
                // stack: 'Total',
                smooth: true,
                data: juzhentime()
            }
        ]
    };
    // 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();
// 第四个图
(function() {

    let myChart = echarts.init(document.querySelector("#forth-echarts"))

    let value = [];
    let label = [];
    for (let i = 30; i <= 40; i++) {
        let startTime = new Date().getTime();
        digui(i);
        let endTime = new Date().getTime();
        value.push(endTime - startTime);
        label.push(i);
    }
    console.log(value)
    option = {
        title: {
            text: "递归时间",
            textStyle: {
                color: "#fff"
            },
            left: "center",
            top: "2%"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    type: "solid",
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: 'rgba(255,255,255,0)', // 0% 处的颜色
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(255,255,255,1)', // 100% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(255,255,255,0)', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            },
        },
        grid: {
            left: '12%',
            top: '14%',
            bottom: '12%',
            right: '4%'
        },
        xAxis: {
            data: label,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 129, 109,.1)',
                    width: 1 //这里是为了突出显示加上的
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#45b97c',
                    fontSize: 12
                }
            }
        },
        yAxis: [{
            axisTick: {
                show: false
            },
            axisLine: {
                show: "true",
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.05)',
                    width: 1 //这里是为了突出显示加上的
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#50b7c1'
                }
            },
            splitArea: {
                areaStyle: {
                    color: 'rgba(255,255,255,.5)'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 129, 109, 0.1)',
                    width: 0.5,
                    type: 'dashed'
                }
            }
        }],
        series: [{
            type: 'pictorialBar',
            barCategoryGap: '0%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            label: {
                show: true,
                position: 'top',
                distance: 15,
                color: '#08DFFE',
                fontWeight: 'bolder',
                fontSize: 15,
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: '#9A11FF'
                            },
                            {
                                offset: 1,
                                color: '#08DFFE'
                            }
                        ],
                        global: false //  缺省为  false
                    }
                },
                emphasis: {
                    opacity: 1
                }
            },
            data: value
        }]
    };
    // 配置项和数据给我们的实例化对象
    myChart.setOption(option);

    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法

        myChart.resize();
    });

})();
// 第二个图
(function() {
    let value0 = fibo(12);
    let value1 = [];
    value0.forEach(function(item, index) {
        if (index < 9) {
            value1.push({ value: item, name: "rose" + " " + "0" + (index + 1) })
        } else {
            value1.push({ value: item, name: "rose" + " " + (index + 1) })
        }

    })
    let myChart = echarts.init(document.querySelector("#second-echarts"))
    let option = {
        title: {
            text: "南丁格尔玫瑰图",
            top: 10,
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 16
            }
        },
        legend: {
            top: 'bottom',
            textStyle: {
                color: "#fff",
            }
        },
        tooltip: {
            trigger: 'item'
        },
        // toolbox: {
        //     show: true,
        //     feature: {
        //         mark: { show: true },
        //         dataView: { show: true, readOnly: false },
        //         restore: { show: true },
        //         saveAsImage: { show: true }
        //     }
        // },
        series: [{
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 100],
            label: {
                show: false
            },
            center: ['50%', '55%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            data: value1,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(255, 255, 255, 0.5)'
                }
            }
        }]
    };
    // 配置项和数据给我们的实例化对象
    myChart.setOption(option);

    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法

        myChart.resize();
    });

})();



// 最后一个表格
(function() {
    let inputValue = document.querySelectorAll("td input");
    let buttonBegin = document.querySelectorAll("td button");
    let timeValue = document.querySelectorAll("td:nth-child(4)");
    let result = document.querySelectorAll("td:nth-child(5)");
    let value = [];
    // console.log(inputValue);
    for (let i = 0; i < inputValue.length; i++) {
        value.push(inputValue[i].value)
    }
    // console.log(value)
    buttonBegin[0].addEventListener("click", function() {
        if (inputValue[0].value == "max") {
            let data = [];
            for (let i = 1; 1; i++) {
                let value = fibosingle(i);
                if (value >= Math.pow(2, 64)) {
                    console.log(data.pop())
                    console.log(i - 1);
                    result[0].innerHTML = i - 1;
                    let startTime = new Date().getTime();
                    let key = fibosingle(i - 1);
                    let endTime = new Date().getTime();
                    timeValue[0].innerHTML = endTime - startTime;
                    return;
                }
                data.push(value)
            }
        } else if (inputValue[0].value <= 0 || inputValue[0].value > 94) {
            alert("输入错误！")
        } else {
            let startTime = new Date().getTime();
            let key = fibosingle(inputValue[0].value);
            let endTime = new Date().getTime();
            timeValue[0].innerHTML = endTime - startTime;
            result[0].innerHTML = key;
        }
    })
    buttonBegin[1].addEventListener("click", function() {
        if (inputValue[1].value <= 0 || inputValue[1].value > 94) {
            alert("输入错误！")
        } else {
            let startTime = new Date().getTime();
            let key = digui(inputValue[1].value);
            let endTime = new Date().getTime();
            timeValue[1].innerHTML = endTime - startTime;
            result[1].innerHTML = key;
        }
    });
    buttonBegin[2].addEventListener("click", function() {
        if (inputValue[2].value <= 0 || inputValue[2].value > 94) {
            alert("输入错误！")
        } else {
            let startTime = new Date().getTime();
            let key = gongshi(inputValue[2].value);
            let endTime = new Date().getTime();
            timeValue[2].innerHTML = endTime - startTime;
            result[2].innerHTML = Math.round(key);
        }
    });
    buttonBegin[3].addEventListener("click", function() {
        if (inputValue[3].value <= 0 || inputValue[3].value > 94) {
            alert("输入错误！")
        } else {
            let startTime = new Date().getTime();
            let key = juzhen(inputValue[3].value);
            let endTime = new Date().getTime();
            timeValue[3].innerHTML = endTime - startTime;
            result[3].innerHTML = key;
        }
    })

})();






// js最大整数不能大鱼Math.pow(2,53)否者整数不准确
// (function() {
//     let data = [];
//     console.log(Math.pow(2, 60))
//     for (let i = 1; 1; i++) {
//         let value = fibosingle(i);
//         if (value >= Math.pow(2, 64)) {
//             console.log(data)
//             console.log(i - 1);
//             return;
//         }
//         data.push(value)
//     }

// })();